import React from 'react';
import { List, Loading, Button, Space } from 'antd-mobile';
import useStudentStars from '../components/useStudentStars';
import { pad6 } from '../utils/pad6';

export default function MobileStars() {
  const { data, loading } = useStudentStars();
  if (loading) return <Loading />;

  return (
    <List header="学生星星榜">
      {data.map(({ id, name, stars }) => (
        <List.Item
          key={id}
          extra={
            <Space>
              <Button size="mini" onClick={() => alert(`明细：${name}`)}>
                明细
              </Button>
              <Button size="mini" color="primary" onClick={() => alert(`使用：${name}`)}>
                使用
              </Button>
            </Space>
          }
        >
          {/* 姓名占 6 字符位 */}
          <span style={{ display: 'inline-block', width: '6em' }}>{pad6(name)}</span>
           {stars} ⭐
        </List.Item>
      ))}
    </List>
  );
}